import React, { Component } from 'react'
import TwsLayout from './components/tws-layout'
import { LocaleProvider } from 'antd'
import { IntlProvider } from 'react-intl'
import locales from './locales'
import { connect } from 'react-redux'
import { HashRouter as Router, Route } from 'react-router-dom'

import TaskPageBody from './components/common/task/task-page-body'
import ExcellentAssignmentListPageBody
  from './components/common/excellent-assignment-list/excellent-assignment-list-page-body'
import StudentMyProgramListPageBody from './components/student/my-program-list/my-program-list-page-body'
import StudentProgramIntroductionPageBody
  from './components/student/program-introduction/program-introduction-page-body'
import StudentProgramTopicTaskPageBody from './components/student/program-topic-task/program-topic-task-page-body'
import StudentProgramLeaderBoardPageBody from './components/student/leader-board/leader-board-page-body'
import FollowerLinkPageBody from './components/follower-link-page-body'
import { getLangFromLocalStorage } from './constant/lang-util'

class App extends Component {
  render () {
    const lang = this.props.lang || getLangFromLocalStorage()
    const langData = locales[lang]
    return (
      <IntlProvider locale={langData.intlLocale} messages={langData.intlMessage}>
        <LocaleProvider locale={langData.locale}>
          <Router>
            <TwsLayout lang={lang}>
              <Route exact path='/' component={StudentMyProgramListPageBody} />
              <Route exact path='/program/:programId/task/:taskId' component={TaskPageBody} />
              <Route exact path='/program/:programId/task/:taskId/assignment/:assignmentId/quiz/:quizId/excellent-quiz-list'
                component={ExcellentAssignmentListPageBody} />
              <Route exact path='/program/:programId/introduction' component={StudentProgramIntroductionPageBody} />
              <Route exact path='/program/:programId/task' component={StudentProgramTopicTaskPageBody} />
              <Route exact path='/program/:programId/leader-board' component={StudentProgramLeaderBoardPageBody} />
              <Route exact path='/programs/followers/links' component={FollowerLinkPageBody} />
            </TwsLayout>
          </Router>
        </LocaleProvider>
      </IntlProvider>

    )
  }
}

const mapStateToProps = ({lang}) => ({lang})

export default connect(mapStateToProps)(App)
